<template>
  <div class="MusicList">
    <div class="Top">
      <span>发现好歌单</span>
      <span>查看更多</span>
    </div>
    <div class="Bottom">
      <van-swipe :loop="false" :width="100" class="my-swipe" :show-indicators="false">
        <van-swipe-item v-for="item in musiclist" :key="item.id">
        <router-link :to="{ path: '/itemmusic',query:{id:item.id}}">
          <img :src="item.picUrl" alt="" />
          <div>{{ item.name }}</div>
        </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  name: "MusicList",
  data() {
    return {
      musiclist: [],
      msg: "",
    };
  },
  methods: {
    async getpersonalized() {
      let res = await this.$axios
        .get("/personalized?limit=6")
        .then((res) => {
          console.log(res);
          this.musiclist = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getpersonalized();
  },
};
</script>

<style scoped>
.MusicList .Top {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  padding-bottom: 0;
}
.MusicList .Top span:nth-child(1) {
  font-size: 0.4rem;
  font-weight: 700;
}
.MusicList .Top span:nth-child(2) {
  font-size: .26rem;
  font-weight: 500;
  width: 20%;
  border-radius: 0.4rem;
  border: 1px solid black;
  text-align: center;
  padding: 0.06rem;
}
.Bottom {
  padding: 0.2rem;
}
.my-swipe {
  width: 100%;
}
.van-swipe-item {
  padding: 0.1rem;
}
.van-swipe-item img {
  width: 100%;
  border-radius: .2rem;
}
.van-swipe-item div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2; 
  font-size: 13px;
}
</style>